@charset "UTF-8";
@import "reset";

/*
    * @desc 支付页面样式
    * @author 欧广烨
    * @date 2023-03-22 
*/

/* 引入字体 */
@font-face {
    font-family: apple-font;
    src: url(../font/pingfang.ttf);
}

/* 支付页面样式 */
.container {

    /* 统一页面字体 */
    font-family: apple-font;

    .pay {
        background-color: #fff;
        height: 100vh;

        /* 顶部标题样式 */
        .topbar-title {
            width: 100vw;
            height: 11.7333vw;
            padding: 3.2vw 0;
            text-align: right;

            span,i {
                font-size: 4.5333vw;
                font-weight: 600;
            }

            i {
                    color: #1677FF;
            }

            span:first-child {
                margin-right: 27.2vw;
            }

            span:last-child {
                margin-right: 3.2vw;
            }

            i:first-child {
                margin-right: 1.3333vw;
            }

            span {
                .other {
                    margin-right: 0;
                }
            }
            }

         /* 支付信息样式
        -------------------------------------------------- */  
        .pay-info {
            width: 93.6vw;
            height: 20.2667vw;
            margin: 0 auto 40px;
            display: flex;
            flex-direction: column;
            align-items: center;

            /* 支付名称样式 */
            .pay-name {
                font-size: 4vw;
                margin-bottom: 2.9333vw;
            }

            /* 支付价格样式 */
            .pay-price {
                font-size: 7.7333vw;
            }

        }

        /* 打开支付宝和下载样式
        -------------------------------------------------- */  
        .open-down {
                text-align: center;

                /* 打开支付宝按钮样式 */
                .open-app {
                    margin-bottom: 5.0667vw;

                    button {
                        border: none;
                        width: 93.6vw;
                        height: 13.1173vw;
                        background-color: #1677FF;
                        font-family: apple-font;
                        font-size: 4.8vw;
                        color: #fff;
                        border-radius: 1.0667vw;
                    }
                }

                /* 下载支付宝链接样式 */
                .download-app {
                    a {
                        text-decoration: none;
                        font-size: 4vw;
                        color: #1677FF;
                    }
                }
        }

        /* 底部链接 */
        .bottom-link {
            text-align: center;
            margin-top: 103vw;
            margin-bottom: 5.6vw;
            a {
                font-size: 4.8vw;
                text-decoration: none;
                color: #4b6b99;
            }
        }

    }

}